jquery图片上传插件HHuploadify

好几天没有写文章了，最近在做公司的一个后台图片上传，基于Huploadify重写了一下这个插件，在它的基础上做了一些定制，已经托管在github，可以通过这里获悉。

简介

有一个著名的图片上传插件uploadify，在这个插件基础上，Huploadify被开发出来，是由国人开发的，使用起来也比较好用。但是，我 希望对自己的项目进行定制，希望实现像淘宝添加图片那样，点击一个上传按钮，然后自己上传，上传的时候，有一个进度条，上传完之后，预览图片。

同时，在Huploadify基础上，还增加了单个图片上传，比如在上传头像的时候，不可能让你上传多张图片。

因此，我在Huploadify的基础上进行修改，得到了HHuploadify。

HHuploadify的用法和Huploadify的用法是一模一样的。不过增加了几个点：

• 增加isSingle配置项，在初始化的时候，如果isSingle=true，那么这个上传只能上传一张图片。domo.html中有案例

• 增加了上传图片结束后，将图片显示到该上传区域中预览，返回格式必须是json，有一个url字段。upload.php中有案例

修改样式：通过修改HHuploadify.css文件中的样式来控制表现。

上传后得到的图片预览是通过将图片作为该区域的背景图片实现的，因此，如果要调整该图片，必须通过css来进行控制。

安装

获取代码：从我的github上下载HHuploadify的源代码。

首先，你的网页中得引入jquery

<script src="jquery-2.2.0.min.js"></script>

其次，再网页中引入插件文件

<script src="jquery.HHuploadify.js"></script>

再次，再网页头部引入HHuploadify的样式文件

<link rel="stylesheet" href="HHuploadify.css">

如果你想对HHuploadify的样式进行修改，可以修改HHuploadify.css文件中的具体规则，改完之后，把上面的地址改为HHuploadify.css，从而使用新的样式。当然，你也可以把里面的样式全部拷贝出来，放到自己的样式文件里面去，这样就可以不用引用HHuploadify.css。
使用

HHuploadify会初始化一个按钮，让你进行上传。因此，在你需要展示这个按钮的地方做如下操作。假如你想调用的容器为<div id="upload"></div>，只需要在网页底部加入如下代码：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        uploader:'upload.php' // 必须的，必须指定用来处理上传逻辑的后端处理URL
    });
</script>

这样，就可以初始化一个按钮，点击按钮之后可以多选多张图片，每张图片会各自提交到upload.php。这里提示一下，uploadify本身就是一张一张图片提交的，而不是所有图片一起提交。upload.php可以是你自己的URL，在这个URL进行图片处理和保存，并且返回一个包含url字段的json字符串，通过这个url字段让上传区域展示图片。

单张片上传

你可能现在想上传一张头像图片，先把css改为你想要的结果。在上面的代码中，只需要加入一个isSingle参数即可：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        isSingle:true,
        uploader:'upload.php'
    });
</script>

这样，这个区域只能进行一张图片的上传。

初始化参数

fileTypeExts:'.',//允许上传的文件类型，格式'.jpg;.doc' uploader:'',//文件提交的地址
auto:true,//是否开启自动上传 method:'post',//发送请求的方式，get或post
multi:true,//是否允许选择多个文件 isSingle:false,//
是否是单个文件上传，如果是单个文件上传，选择文件后，上传按钮会消失，multi也会被强制设定为false
formData:null,//发送给服务端的参数，格式：{key1:value1,key2:value2}
fileObjName:'file',//在后端接受文件的参数名称，如PHP中的$_FILES['file']
fileSizeLimit:2048,//允许上传的文件大小，单位KB
showUploadedFilename:false,//是否显示上传文件名
showUploadedPercent:false,//是否实时显示上传的百分比，如20%
showUploadedSize:false,//是否实时显示已上传的文件大小，如1M/2M
buttonText:'选择文件',//上传按钮上的文字 removeTimeout: 1000,//上传完成后进度条的消失时间，单位毫秒
itemTemplate:itemTemp,//上传队列显示的模板 onUploadStart:null,//上传开始时的动作
onUploadSuccess:null,//上传成功的动作 onUploadComplete:null,//上传完成的动作
onUploadError:null, //上传失败的动作 onInit:null,//初始化时的动作
onCancel:null,//删除掉某个文件后的回调函数，可传入参数file
onClearQueue:null,//清空上传队列后的回调函数，在调用cancel并传入参数*时触发
onDestroy:null,//在调用destroy方法时触发 onSelect:null,//选择文件后的回调函数，可传入参数file
onQueueComplete:null//队列中的所有文件上传完成后触发

以上是HHuploadify的所有默认初始化参数，除了isSingle以外，其他所有的都是和Huploadify一样的，只不过我修改了它的默认值。

具体文档请阅读Huploadify。

例子

上传图片后提交保存相册

现在模拟用HHuploadify来做一个相册。用户先创建了一个相册A，多选图片，上传到该相册，图片全部由数据库保存URL，并有对应的ID，现在要求，有一个相册和图片的关系数据表album_photo_relation用来保存哪一张图片属于哪一个相册。那么问题来了，如何在上传图片的时候实现这个过程呢？

很简单，在初始化参数中增加formData参数，比如：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        formData: {album_id: <?=$album_id?>},
        uploader:'upload.php'
    });
</script>

在upload.php中就能接收到该相册的ID：$_POST['album_id']。这样，在upload.php中就可以在插入完photo获得photo_id后，再向alubm_photo_relation表中插入一条记录。

现在问题又来了，加入要求不允许先创建相册、进入相册再上传，现在要求相册创建时先上传图片，上传完之后，和相册信息（如名称、描述等）一同提交到create_album.php。

这就复杂了，因为不能通过formData，直接在upload.php中完成每一张图片的操作。怎么办呢？我的解决办法是，在图片上传完成后，将图片的photo_id加载到当前的页面里面，提交创建相册的时候，同时可以知道该相册有哪些图片。

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        uploader: 'upload.php',
        onUploadSuccess: function(file,data) {
            var photo = JSON.parse(data);
            var photo_id = photo.id;
            var instanceNumber = $('.uploadify').length+1;
            var file_index = file.index;
            $('#fileupload_' + instanceNumber + '_' + file_index).append('<input type="hidden" name="photo_id[]" value="' + photo_id + '">');
        }
    });
</script>

上面的代码主要利用到了onUploadSuccess事件，及当一张图片上传成功之后的回调。这样，在删除的时候，可以删除掉对应的input，在提交的时候，可以提交对应的photo_id[]。

上传完图片后可对图片进行拖动排序

在相册的案例中，有一种情况是，还可以对图片进行拖动，调整图片组的顺序。怎么实现呢？首先你得有一个能够实现拖动的jquery插件，我推荐DragSort。

<script src="jquery.dragsort-5.2.0.min.js"></script>
<script>
$('#upload').HHuploadify({
    fileTypeExts:'*.jpg;*.png;*.gift',
    uploader:'upload.php',
    onQueueComplete:function() {
        var instanceNumber = $('.uploadify').length+1;
        var $instance = $('#file_upload_' + instanceNumber + '-queue');
        $instance.dragsort("destroy");
        $instance.dragsort({
                dragSelector: "div.uploadify-queue-item",
                dragBetween: true,
                dragEnd: function(){
                    $instance.find('.uploadify-queue-item').removeAttr('style');
                },
                placeHolderTemplate: '<div class="uploadify-queue-item"></div>'
            });
    }
});
</script>

上面的代码通过一个onQueueComplate事件绑定，在所有文件上传结束后，执行函数中的动作。函数中的动作可以使该区域内的所有图片区域绑定dragsort，实现拖动排序的功效。

扩展函数

为了实现更简洁的载入，我新增了HHuploadifyReady.js，里面有两个函数initHHuploadify函数和resetHHuploadify函数。

function initHHuploadify(selector,uploader,field,isSingle)

selector是要初始化的选择器，uploader是上传后端处理URL，field是回调的时候，往区域内插入的input的name值，注意，插入的input name=field[]，提交的是一个数组，后端应该注意一下。isSingle就不解释了，表示是否单个图片上传，当为true时，input name=field，不是数组。

为了便于使用，一般再使用的时候，你可以不设置第四个参数，而是使用下面这个函数：

function initHHuploadifyOne(selector,uploader,field)

这个函数是从上面的函数衍生出来的，不用传第四个参数，即可让HHuploadify初始化为一个只能上传一张图片的区域。

function resetHHuploadify(selector,images,field)

当完成初始化之后，你会发现，有的时候你的页面上需要放置几张图片进去，比如在编辑相册的时候，你的相册中本身已经存在了一些图片了，所以你在编辑它的时候，必须让相册中的图片都显示出来，这个时候，需要用resetHHuploadify来实现。它有三个参数，selector和前面的一样，都是指初始化时的对象选择器，例如$(selector)在前面的案例中就是$('#upload')。images是一个对象数组，包含了要用于显示的图片信息，首先它是一个数组，其次它的每一个元素又是对象，形式如下：

[{'id' => 4,'url' => '/images/afa.jpg'},{'id' => 56,'url' =>
'/images/aafdsfa.jpg'},{'id' => 12,'url' => '/images/12fa.jpg'}]

为什么要这样呢？id是用来作为input的value值的，url是用来展示图片的，就是这样。field则是input的name值，注意，由于是多个input，所以它也是input name=field[]，是个数组，后端接收的时候要注意。

不过在resetHHuploadify的基础上，也衍生出了resetHHuploadifyOne

function resetHHuploadifyOne(selector,image,field)

唯一的区别在于第二个参数，由images变为image，不是一个数组，而是一个对象，形式如下：

{'id' => 56,'url' => '/images/aafdsfa.jpg'}

只有一张图片的信息。

OK，对HHuploadify的推介就到这里了，如果你有不懂的地方，欢迎到我的github去提交issue。